/*
  学习目标：useState使用的三个注意事项和一个规范写法
  步骤：
     1. useState可以多次调用，声明多个状态
     2. useState可声明任意数据类型
     3. 更新状态，还是新值覆盖旧值
  规范写法：const [状态， set驼峰变量名] = useState(初始值)
*/

// 快捷生成 rfc
import React, { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello react');

  // 使用快捷键 useState
  const [arr, setArr] = useState([1, 2, 3]);
  const [obj, setObj] = useState({ name: 'zs', age: 20 });
  return (
    <div>
      我是App
      <div onClick={() => setCount(count + 1)}>{count}</div>
      <div onClick={() => setMsg(msg + '~')}>{msg}</div>
      {/* 一定要用新指覆盖旧值 */}
      <div onClick={() => setArr([...arr, 6])}>{arr}</div>
      <div onClick={() => setObj({ ...obj, name: obj.name + '~' })}>
        {JSON.stringify(obj)}
      </div>
    </div>
  );
}
